<template>
	<view class="bottom-nav-warp">
		<view class="list" :class="currentIndex==0?'active':''" @click="gotoPage('/pages/property/property')">
			<view class="icon nav01"></view>
		</view>
		<view class="list" :class="currentIndex==1?'active':''" @click="gotoPage('/pages/count/count')">
			<view class="icon nav02"></view>
		</view>
		<view class="list" :class="currentIndex==2?'active':''" @click="gotoPage('/pages/flash/flash')">
			<view class="icon nav03"></view>
		</view>
		<view class="list" :class="currentIndex==3?'active':''" @click="gotoPage('/pages/sample/sample')">
			<view class="icon nav04"></view>
		</view>
		<view class="list" :class="currentIndex==4?'active':''" @click="gotoPage('/pages/mine/mine')">
			<view class="icon nav05"></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props:{
			currentIndex: 0
		},
		methods:{
			gotoPage(path){
				if(path){
					uni.redirectTo({
					    url: path
					});
				} else {
					this.$refs.uToast.show({
						title: '还没做，不要急',
						type: 'warning',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-nav-warp{
		position:fixed;
		bottom:0;
		width: 100%;
		height: 48*2rpx;
		background: #202020;
		box-shadow: 0px -2px 20*2rpx 0px rgba(0, 0, 0, 0.5);
		display: flex;
		left:0;
		.list{
			flex:1;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width:18*2rpx;
				height: 18*2rpx;
				background: no-repeat;
				background-size: 100% 100%;
				opacity: 0.3;
				&.nav01{
					background-image: url('/static/nav/nav01.png');
				}
				&.nav02{
					background-image: url('/static/nav/nav02.png');
				}
				&.nav03{
					width:50*2rpx;
					height:50*2rpx;
					margin-bottom:18*2rpx;
					background-color: #202020;
					border-radius: 50%;
					background-image: url('/static/nav/nav03.png');
					background-size: 44*2rpx 44*2rpx;
					background-position: center center;
				}
				&.nav04{
					background-image: url('/static/nav/nav04.png');
				}
				&.nav05{
					background-image: url('/static/nav/nav05.png');
				}
			}
			&.active{
				.icon{
					opacity: 1;
				}
			}
		}
	}
</style>
